<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>申报系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <link rel="stylesheet" href="css/me.css">
    <link rel="stylesheet" href="css/base.css"/>
    <link rel="stylesheet" href="css/modal.css"/>
    <link rel="stylesheet" href="js/layui/css/layui.css"/>
    <link rel="stylesheet" href="css/index.css"/>
    <link rel="stylesheet" href="css/top.css"/>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
    <div class="qkl_content">
        <div class="qkl_inner">
            <form id="inforForm" enctype="multipart/form-data" name='inforForm' method='post' onsubmit = "return checkInput(this)" th:object="${user}">
                <input type="hidden" name="id" id="idIt" placeholder="id"/>
                <p class="titleBtn">
                    区块链企业库填报
                </p>
                <div class="labelBox clearfix">
                    <div class="inputWrap">
                        <label><span>*</span>推荐单位</label>
                        <select id="ComName" name="advanceUnit" class='required' data-valid="isNonEmpty" data-error="*请选择">
                            <option value="1">区块链总部</option>
                            <option value="2">区块链分部</option>
                        </select>
                    </div>
                    <div  class="inputWrap">
                            <label><span>*</span>联系人</label>
                            <input  type="text" maxlength="100" placeholder="联系人" class="required" data-valid="isNonEmpty" data-error="*请选择" name="name" id="name"/>
                    </div>
                    <div class="inputWrap">
                        <label><span>*</span>联系方式</label>
                        <input  type="text" placeholder="联系方式" class='required' data-valid="isNonEmpty||isMob" data-error="*请输入||*格式不正确" name="tel" id="tel"/>
                    </div>
                </div>
                <div class="labelBox clearfix">
                    <div class="inputWrap">
                        <label><span>*</span>企业营业执照</label>
                        <div class="file">
                            <label class="ui_button" for="xFile" style="width:120px;overflow:hidden;">选取文件</label>
                            <input  placeholder="照片" type="file" id="xFile" accept="image/*" onchange="showImg(this)" style="display:none;position:absolute;clip:rect(0 0 0 0);">
<!--                            <input name="licenseImgUrl" class='required' data-valid="isNonEmpty" data-error="*请上传" style="display:none;">-->
<!--                            &lt;!&ndash; <span class="ui_tip">未选择文件</span>&ndash;&gt;-->
                        </div>
                    </div>
                </div>
                <!-- 下面是要显示的图片-->
                <div class="labelBox clearfix" id="imageDown" style="display: none;">
                    <div id="preview">
                        <img id="imghead" style="width:186px;height:124px;"
                             src=''>
                    </div>
                </div>
                <div class="labelBox clearfix">
                    <div class="inputWrap">
                        <label><span>*</span>请输入申请人职位</label>
                    </div>
                    <div class="inputWrap">
                        <div class="ui radio checkbox">
                            <input type="radio" name="fruit" value='群众' id="apple">
                            <label>群众</label>
                        </div>
                    </div>
                    <div class="inputWrap">
                        <div class="ui radio checkbox">
                            <input type="radio" name="fruit" value="党员" id="orange">
                            <label>党员</label>
                        </div>
                    </div>
                </div>
                <div class="labelBox clearfix">
                    <div class="inputWrap">
                        <label><span>*</span>创始人工作经历</label>
                    </div>
                    <div class="inputWrap">
                        <div class="ui toggle checkbox">
                            <input type="checkbox" id="test" value="测试工程师">
                            <label for="test">测试工程师</label>
                        </div>
                        <div class="ui toggle checkbox">
                            <input type="checkbox" id="manager" value="产品经理">
                            <label for="manager">产品经理</label>
                        </div>

                    </div>

                    <div class="inputWrap">
                        <div class="ui toggle checkbox">
                            <input type="checkbox" id="high" value="高级工程师">
                            <label for="high">高级工程师</label>
                        </div>
                    </div>
                </div>
                <div style="text-align: center">
                    <input type="submit" id = "editEmailPassword" onclick="commitTable(this)" value = "提交" class="ui small small floated teal basic button" style="width: 80px;height: 38px">
                    <a href="login.html"  class="ui middle middle floated teal basic button">返回</a>
                    <a href="all.html"  class="ui middle middle floated teal basic button">查看已提交</a>
                </div>
            </form>
        </div>
    </div>
</body>
</html>
<script src="plugins/axios/axios.min.js"></script>
<script src="plugins/axios/axios-0.18.0.js"></script>
<script type="text/javascript">
    function checkInput(form) {
        for (let i = 0; i < form.length; i++) {
            // alert("进来了");
            if (form.elements[i+1].value == "" && i < 4) {

                //这里返回一个Boolean值，从而确定表单是否能够提交
                return false;
            }
        }
        alert("提交中！");
        return true;
    };
    // 上传图片时显示图片 js
    function showImg(file)

    {
        var MAXWIDTH  = 260;
        var MAXHEIGHT = 180;
        var div = document.getElementById('preview');
        if (file.files && file.files[0])
        {
            div.innerHTML ='<img id=imghead>';
            var img = document.getElementById('imghead');
            img.onload = function(){
                var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                img.width  =  rect.width;
                img.height =  rect.height;
                img.style.marginTop = rect.top+'px';
            }
            var reader = new FileReader();
            reader.onload = function(evt) {
                img.src = evt.target.result;
                console.log(img.src.toString());
            }
            reader.readAsDataURL(file.files[0]);
            var imageDown = document.getElementById('imageDown');
            imageDown.style.display="block";
        }
        else //兼容IE
        {
            var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
            file.select();
            var src = document.selection.createRange().text;
            div.innerHTML = '<img id=imghead>';
            var img = document.getElementById('imghead');
            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
            status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
            div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
        }
    }
    function clacImgZoomParam( maxWidth, maxHeight, width, height ){
        var param = {top:0, left:0, width:width, height:height};
        if( width>maxWidth || height>maxHeight )
        {
            rateWidth = width / maxWidth;
            rateHeight = height / maxHeight;
            if( rateWidth > rateHeight )
            {
                param.width =  maxWidth;
                param.height = Math.round(height / rateWidth);
            }else
            {
                param.width = Math.round(width / rateHeight);
                param.height = maxHeight;
            }
        }

        param.left = Math.round((maxWidth - param.width) / 2);
        param.top = Math.round((maxHeight - param.height) / 2);
        return param;
    }
    function commitTable(tab) {
        var formData = new FormData();

        var reg = new RegExp(/^\d+$/);//判断手机号是不是数字

        var arr = [];

        var state = "审核中";

           axios({
               method: 'post', //用POST方式传输

               url: '/user/commit',
               data: {
                   userId: document.getElementById('tel').value,
                   ComName: '区块链分部',
                   name: document.getElementById('name').value,
                   tel: document.getElementById('tel').value,
                   job: '党员',
                   exp: '高级工程师',
                   state: '审核中',

               },
           }).then(function (response) {
                   console.log(response);
                   if (response.data.code === 1) {
                       alert("提交成功！");

                   } else {
                       alert("提交失败！");
                   }
               }).catch(function (error) {
                   console.log(error);
               });

    }
</script>